<template>
  <el-dialog @close="cancleEditProduct" v-model="dialogVisible" title="修改检测模板-产品" destroy-on-close center>
    <template #default>
      <el-form :model="product" label-width="100px" label-position="left">

        <el-form-item label="*产品物料编码">
          <el-input  v-model="product.materialProductId" placeholder="请输入产品物料编码" />
        </el-form-item>

        <el-form-item label="*产品物料名称">
          <el-input
              v-model="product.materialProductName"
              style="max-width: 600px"
              placeholder="请输入产品物料名称"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="findSearch"></el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="规格型号">
          <el-input  type="textarea" v-model="product.types" placeholder="请输入规格型号" />
        </el-form-item>

        <<el-form-item label="最低检测数">
        <el-input-number v-model="product.underCheck" :min="1" :max="100"  @change="handleChangeUpundercheck" />
      </el-form-item>

        <el-form-item label="最大不合格数">
          <el-input-number v-model="product.maxNoQualified" :min="0" :max="100"  @change="handleChangeUpMaxUnpass" />
        </el-form-item>


        <el-form-item label="单位">
          <el-select  v-model="product.unit"  >
            <el-option v-for="item in types" :key="item.unit" :label="item.unit" :value="item.unit" />
          </el-select>
        </el-form-item>

        <el-form-item label="最大致命缺陷率">
          <el-input-number v-model="product.maxFatalDefect" :min="0" :max="100"  @change="handleChangeUpMaxFateFlaw" />
        </el-form-item>

        <el-form-item label="最大严重缺陷率">
          <el-input-number v-model="product.maxSeriousDefect" :min="0" :max="100"  @change="handleChangeSeriousDefect" />
        </el-form-item>

        <el-form-item label="最大轻微缺陷率">
          <el-input-number v-model="product.maxLittleFlaw" :min="0" :max="100"  @change="handleChangeLittleFlaw" />
        </el-form-item>


        <el-form-item label="备注">
          <el-input type="textarea" v-model="product.note" placeholder="请输入内容" />
        </el-form-item>

      </el-form>
    </template>
    <!-- footer插槽中放两个按钮 -->
    <template #footer>
      <el-row>
        <el-col :span="12">
          <el-button type="primary" @click="editProduct">确定</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="cancleEditProduct">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { watch } from "vue";
import MaterialProductRequest from "@/api/materialproduct.js";
export default {
  props: ["visible","materialProductId"],
  emits: ["optionCompleted2"], // 对外暴露一个事件，用来传递添加学生的操作结果
  data() {
    return {
      product: {},// 绑定要编辑的学生信息
      dialogVisible: false,// 编辑学生窗口的显示与隐藏
      types:{},
      a:this.materialProductId,
    }
  },
  methods: {

    /**
     * 最大检测数
     */
    handleChangeUpundercheck(value){
      this.productMaterial.minChecks = value;
    },

    /**
     * 最大不合格数
     */
    handleChangeUpMaxUnpass(value){
      this.productMaterial.maxNoQualified = value;
    },
    /**
     * 最大致命缺陷
     */
    handleChangeUpMaxFateFlaw(value){
      this.productMaterial.maxFatalDefect = value;
    },
    /**
     * 最大严重缺陷
     */
    handleChangeSeriousDefect(value){
      this.productMaterial.maxSeriousDefect = value;
    },

    /**
     * 最小缺陷数
     */
    handleChangeLittleFlaw(value){
      this.productMaterial.maxLittleFlaw = value;
    },



    /**
     * 取消编辑事件
     */
    cancleEditProduct(){
      // 通知父组件  操作完成，让父组件关闭窗体
      this.$emit("optionCompleted2");
    },
    /**
     * 编辑
     */
    editProduct(){
      console.log(this.product)
      MaterialProductRequest.updateMaterialProduct(this.product,res=>{
        if (res.code == '200'){
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          // 通知父组件  操作完成，让父组件关闭窗体
          this.$emit("optionCompleted1");
        }else if(res.code == '300'){
          this.$message({
            type: 'warning',
            message: '字典' + (res.msg.indexOf("productName") > 0 ?"名称":"类型") + "重复"
          });
        }else{
          this.$message({
            type: 'error',
            message: '编辑字典失败!'
          });
        }
      });
    },

    /**
     * 加载物料产品信息
     */
    loadProduct(){
      MaterialProductRequest.getById(this.materialProductId,res=>{
        if(res.data != null)
          this.product = res.data;
        console.log(this.materialProductId)
          console.log(this.product)
      });
    },



  }, mounted(props) {
    this.loadProduct();
    // this.loadProductAll();
    // 侦听props   一旦发生变化，就会出发下面的函数
    watch(() => this.visible, (newVal, oldVal) => {
      // 将最新的值设置给弹窗的dialogVisible属性
      this.dialogVisible = newVal;
    });

    watch(() => this.materialProductId, (newVal, oldVal) => {
      // 如果productId 发生变化，重新加载字典信息
      this.loadProduct();
    });
  }
}
</script>